<template>
  <div class="cs-p">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:5px;">
        	<el-form :inline="true" :model="filters" :size="size">
        		<el-form-item>
        			<el-input
                v-model="filters.keyword"
                clearable
                @clear="handleClear"
                placeholder="请输入分组名称或分组编码"></el-input>
        		</el-form-item>
        		<el-form-item>
        			<!-- <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                perms="sys:dict:select"
                type="primary"
                @click="handleParentFormSubmit"/> -->
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleParentFormSubmit">{{$t('action.search')}}</el-button>
        		</el-form-item>
        		<el-form-item>
        			<kt-button
                icon="fa fa-plus"
                :label="$t('action.add')"
                perms="sys:dict:save"
                type="primary"
                @click="handleFormAddorUpdate"/>
        		</el-form-item>
        	</el-form>
        </div>
        <el-table
          stripe
          border
          :size="size"
          max-height="690"
          :data="dictionaryData"
          :highlight-current-row="true"
          @row-click="rowClick"
          class="el-table-parent"
          style="width: 100%">
          <el-table-column
            prop="code"
            min-width="30%"
            label="分组编码">
            <template slot-scope="scope">
              <span style="color: #548aff; cursor: pointer;">
                {{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dictTypeName"
            min-width="30%"
            label="分组名称">
          </el-table-column>
          <el-table-column
            prop="description"
            min-width="20%"
            label="备注"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="shop_price"
            width="185"
            label="操作">
            <template slot-scope="scope">
              <kt-button
                icon="fa fa-edit"
                :label="$t('action.edit')"
                perms="sys:dict:update"
                @click.native="handleFormAddorUpdate(scope.row)"/>
              <kt-button
                icon="fa fa-trash"
                :label="$t('action.delete')"
                perms="sys:dict:delete"
                type="danger"
                @click.native="delParentDia(scope.row.dictTypeId)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="12">
        <div
          class="toolbar"
          style="float:left;padding-top:10px;padding-left:5px;">
        	<el-form
            :inline="true"
            :model="searchChildrenForm"
            :size="size">
        		<el-form-item>
        			<el-input
                v-model="searchChildrenForm.keyword"
                clearable
                @clear="handleChildrenFormSubmit"
                placeholder="请输入字典名称或字典编码"></el-input>
        		</el-form-item>
        		<el-form-item>
        			<!-- <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                perms="sys:dict:select"
                type="primary"
                @click="handleChildrenFormSubmit"/> -->
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleChildrenFormSubmit">{{$t('action.search')}}</el-button>
        		</el-form-item>
        		<el-form-item>
        			<kt-button
                icon="fa fa-plus"
                :label="$t('action.add')"
                perms="sys:dict:save"
                type="primary"
                @click="handleFormAddorUpdateChildren"/>
        		</el-form-item>
        	</el-form>
        </div>
        <el-table
          stripe
          border
          max-height="690"
          :size="size"
          :data="dictionaryChildrenData"
          style="width: 100%">
          <!-- <el-table-column
            prop="code"
            label="分组编码">
          </el-table-column> -->
          <el-table-column
            prop="dictName"
            min-width="20%"
            label="字典名称">
          </el-table-column>
          <el-table-column
            prop="code"
            min-width="15%"
            label="字典编码">
          </el-table-column>
          <el-table-column
            prop="description"
            min-width="28%"
            :show-overflow-tooltip="true"
            label="描述">
          </el-table-column>
          <el-table-column
            prop="sort"
            min-width="10%"
            :show-overflow-tooltip="true"
            label="排序">
          </el-table-column>
          <el-table-column
            prop="address"
            width="185"
            label="操作">
            <template slot-scope="scope">
              <kt-button
                icon="fa fa-edit"
                :label="$t('action.edit')"
                perms="sys:dict:update"
                @click.native="handleFormAddorUpdateChildren(scope.row)"/>
              <kt-button
                icon="fa fa-trash"
                :label="$t('action.delete')"
                perms="sys:dict:delete"
                type="danger"
                @click.native="deleteChildrenData(scope.row.dictId)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 弹框、对话框 -->
    <add-parent-dialog
      v-if="addParentFlag"
      ref="addParentDialogRef"
      @refreshParentDataList="getTable"></add-parent-dialog>
    <addchildren-dialog
      v-if="addChildrenFlag"
      ref="addChildrenDialogRef"
      :dictTypeId="selectedDictTypeId"
      @refreshChildrenDataList="handleDictTypeID"></addchildren-dialog>
  </div>
</template>

<script>
import {
  getParentDictTable,
  deleteDictData,
  getDictData,
  deleteChildrenDict,
  selectChildrenDictCode
} from '@/api/auth/dict.js'
import KtButton from "@/views/Core/KtButton"
import AddParentDialog from './components/addparentdialog.vue'
import AddchildrenDialog from './components/addchildrendialog.vue'
export default {
  components: {
    AddParentDialog,
    AddchildrenDialog,
    KtButton
  },
  data() {
    return {
      filters: {
        keyword: ''
      },
      searchChildrenForm: {
        keyword: ''
      },
      size: window.SITE_CONFIG.tableSize,
      addParentFlag: false,
      addChildrenFlag: false,
      // 字典数据对象主表
      dictionaryData: [],
      // 字典数据对象子表
      dictionaryChildrenData: [],
      dTid: '',
      selectedDictTypeId: ''
    }
  },
  created() {
    this.getTable()
  },
  methods: {
    // 点击主表，获取子表的数据
    rowClick(row, cloumn, index) {
      this.selectedDictTypeId = row.dictTypeId
      this.handleDictTypeID(row.dictTypeId)
    },
    // 获取数据字典的所有数据
    getTable() {
      getParentDictTable(this.filters.keyword).then((res) => {
        if (res.code === 200) {
          this.dictionaryData = res.data
        }
      })
    },
    // 单个根据id删除(主)
    delParentDia(dictTypeId) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deleteDictData(dictTypeId).then((res) => {
          // 重新拉取数据
          this.getTable()
        })
          .catch(() => {
          })
      })
    },
    // 主表新增 / 编辑
    handleFormAddorUpdate(row) {
      this.addParentFlag = true
      const _this = this
      this.$nextTick(() => {
        _this.$refs.addParentDialogRef.init(row, true)
      })
    },
    // 点击获取子字典数据(子)
    handleDictTypeID(dictTypeId) {
      this.dTid = dictTypeId
      getDictData(dictTypeId).then(res => {
        this.dictionaryChildrenData = res.data
      })
    },
    // 子表新增 / 修改
    handleFormAddorUpdateChildren(val) {
      let dictTypeId = this.selectedDictTypeId ? this.selectedDictTypeId : ''
      this.addChildrenFlag = true
      const _this = this
      this.$nextTick(() => {
        _this.$refs.addChildrenDialogRef.init(val, dictTypeId)
      })
    },
    // 子表单个删除
    deleteChildrenData(dictId) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deleteChildrenDict(dictId).then((res) => {
          // 当删除一条数据后，刷新当前表格
          this.handleDictTypeID(this.dTid)
        })
          .catch(() => {
          })
      })
    },
    // 查询提交表单
    handleChildrenFormSubmit() {
      selectChildrenDictCode(this.searchChildrenForm.keyword).then(res => {
        this.dictionaryChildrenData = res.data
      })
    },
    // 查询提交按钮
    handleParentFormSubmit() {
      this.getTable()
    },
    // 查询框清空按钮
    handleClear () {
      this.getTable()
    }
  }
}
</script>

<style scoped>
  /* 设置table中的数据居中 */
  /deep/.el-table th > .cell {
    text-align: center;
  }
  /deep/.el-table .cell {
    text-align: center;
  }
  span:nth-child(1){
    margin-right: 5px;
  }
</style>
